// 安装过程
<template>
  <van-popup
      v-model="visible"
      position="bottom"
      class="popup-bg"
      get-container="body"
      :style="{ height: '100%', background: '#F4F6F9' }"
      :lock-scroll="false"
  >
    <f7-page class="common-page page-tab has-bottom-btns">
      <f7-navbar>
          <f7-nav-left>
              <f7-link @click="fnColse" icon-material="chevron_left" force></f7-link>
          </f7-nav-left>
          <f7-nav-title>安装过程</f7-nav-title>
          <f7-nav-right></f7-nav-right>
      </f7-navbar>
      <div class="common-page-content">
        <div class="add-btn" @click="showProject=true" v-if="!disabled">
          <van-icon name="add-o" />添加标准节
        </div>
        <div class="p15">
          <template v-if="list.length>0">
            <div class="qzjx-card df-layout aic jcsb" v-for="(item,index) in list" :key="item.sectionId">
              <div class="left-box df-layout aic">
                <div class="change-box" @click="disabled?'':handleChoose(index)">
                  第 <span>{{list.length-index}}</span> 节 
                  <van-icon name="arrow-down" v-if="!disabled"/>
                </div>
                <section>
                  <h3>{{item.identification}}</h3>
                  <p>自编号：{{item.sectionCode}}</p>
                </section>
              </div>
              <van-icon name="cross" v-if="!disabled" @click="handleDel(index)"/>
            </div>
          </template>
          <v-empty v-else description="暂无数据"></v-empty>
        </div>
        
      </div>
      <f7-toolbar position="bottom" no-shadow class="fff" v-if="!disabled">
        <f7-button fill class="submit-btn" @click="fnSubmit()">提交</f7-button>
      </f7-toolbar>
      <v-popup-picker v-model="showChoose"
              :columns="selectList"
              code="code"
              name="name"
              @confirm="emitConfirm">
      </v-popup-picker>
      <v-popup-person
        v-model="showProject"
        url="/equipment/eqmSection/queryList"
        @save="savePart"
        :chooseList="list"
        :craneType="craneType"
      >
      </v-popup-person>
    </f7-page>
  </van-popup>
</template>

<script>
import Config from "@/libs/config.js";
import vPopupPerson from "./v-popup-person.vue";
export default {
  components: {vPopupPerson},
  props: {
      value: {
          type: Boolean,
          default: false,
          required: true,
      },
      // 操作后自动关闭组件
      autoClose: {
          type: Boolean,
          default: true,
      },
      // 禁用添加标准节点按钮
      disabled:{
        type: Boolean,
        default: false,
      },
      sendList:{
        type:Array,
        default:()=>{
          return []
        }
      },
      craneType:String
  },
  data () {
      return {
          showProject:false,
          selectList:[],
          list:[],
          currentIndex:'',
          showChoose:false,
      }
  },
  computed: {
      visible: {
          get() {
            return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  methods: {
    handleDel(index){
      this.$f7.dialog.confirm("确认删除该节点吗？", r => {
        if (r) {
          // 1.先执行删除 当前要更改的数据的index，要更改的对象数组有list。selectList
          this.list.splice(index,1)
          this.selectList.splice(index,1)
          // 2.把selectList的数据进行重构，因为之前删除了对应的下标
          this.selectList=this.selectList.map((item,index)=>{
            item.name=`第${this.selectList.length-index}节`
            return item
          })
        }
      });
    },
    savePart(arr){
      if(arr.length>0){
        let newArr=JSON.parse(JSON.stringify(arr)).reverse()
        newArr.forEach((item,index)=>{
          this.selectList.unshift({name:`第${this.list.length+index+1}节`,code:item.sectionId})
        })
        this.list.unshift(...arr)
      }
    },
    fnSubmit(){
      this.autoClose && this.fnColse()
      this.$emit('save',this.list)
    },
    // 关闭组件
    fnColse() {
        this.visible = false
    },
    emitConfirm(val){
      // 判断是否更改的位置，如果没更改则不进行重新排序操作
      if(val.index==this.currentIndex) return 
      // 1.根据要更改数据的下标获取到list下的当前下标的数据，因为下一步需要进行删除要更改数据的下标的数据
      let newObj=this.list[this.currentIndex]
      let newSelect=this.selectList[this.currentIndex]
      // 2.先执行删除 当前要更改的数据的index，要更改的对象数组有list。selectList
      this.list.splice(this.currentIndex,1)
      this.selectList.splice(this.currentIndex,1)
      // 3.根据选中的数据(也就是val)进行查找到对应的下标进行插入数据 list,selectList
      this.list.splice(val.index,0,newObj)
      this.selectList.splice(val.index,0,newSelect)
      // 4.把selectList的数据进行重构，因为之前删除了对应的下标
      this.selectList=this.selectList.map((item,index)=>{
        item.sort=this.selectList.length-index
        item.name=`第${this.selectList.length-index}节`
        return item
      })
    },
    handleChoose(index){
      this.currentIndex=index
      this.showChoose=true
    },
  },
  watch: {
    value(val){
      if(val){
        this.list=JSON.parse(JSON.stringify(this.sendList))
        if(this.list.length>0){
          this.list.forEach((item,index)=>{
            this.selectList.push({name:`第${this.list.length-index}节`,code:item.sectionId})
          })
        }
      }else{
        this.selectList=[]
      }
    },
  },
  mounted () {
    
  },
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.submit-btn {
    flex: 1;
    margin: 0 10px;
    border-radius: 24px;
}
.popup-bg{
  .add-btn{
    background: #fff;
    text-align: center;
    padding: 10px 0;
    color: #1990FF;
    /deep/ .van-icon{
      margin-right: 5px;
    }
  }
}
.qzjx-card{
  .left-box{
    flex: 1;
    .change-box{
      padding: 5px 10px;
      margin-right: 15px;
      background: linear-gradient(90deg, rgba(25, 144, 255, 0.10) 0% ,rgba(25, 144, 255, 0.04) 100%);
      border: 1px solid;
      border-image: linear-gradient(to right, rgba(25, 144, 255, 0.35), rgba(25, 144, 255, 0.06)) 1;
      border-radius: 2px;
      color: #1990FF;
      font-size: 12px;
      /deep/ .van-icon{
        margin-left: 10px;
        color: inherit;
        font-size: 16px;
      }
      span{
        font-size:16px;
        font-weight: 6;
      }
    }
    h3{
      color: #242424;
      font-size: 16px;
      font-weight: 500;
    }
    p{
      color: #8995AC;
      font-size: 13px;
    }
  }
  .van-icon{
    color: #B9C1CD;
    flex-shrink: 0;
    font-size: 16px;
  }
}
</style>
